<template>
  <div id="app">
    <el-container>
      <el-aside width="200px" class="aside">
        <Aside></Aside>
      </el-aside>
      <el-container class="right-main">
        <el-header class="main header" height="auto">
          <Header></Header>
        </el-header>
        <el-main class="main page-margin">
          <router-view />
        </el-main>
        <el-footer height="auto" class="footer">
          <Footer></Footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from './components/Aside'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  //import引入的组件
  components: { Aside, Header, Footer },
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {};
  },
  methods: {},
  mounted () { },
};
</script>

<style>
.aside {
  background: #304156;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 3;
}
.aside .el-menu {
  border-right: 0;
}
.right-main {
  margin-left: 200px;
}
.header {
  padding: 0 !important;
}
.footer {
  position: fixed;
  bottom: 0;
  background: #f1f1f1;
  width: calc(100% - 200px);
  text-align: right;
}
</style>